<!DOCTYPE html>
<html>
    <head>
        <title>事件绑定测试</title>
        <style>
            /* 画一个同心圆 */
            #outter, #inner {
                /* 画圆 */
                border-radius: 50%;
                /* 居中 */
                margin: 0 auto;
            }
            #outter {
                width: 200px;
                height: 200px;
                background: #89c;
                position: relative;
            }
            #inner {
                width: 100px;
                height: 100px;
                background: #f00;
                position: absolute;
                left: 50px;
                top: 50px;
            }
        </style>
    </head>
    <body>
        <div id="outter">
            <div id="inner"></div>
        </div>
        <script>
            const outter = document.querySelector('#outter')
            const inner = document.querySelector('#inner')

            outter.addEventListener('click', function() {
                console.log('捕获 outter')
            }, true);

            inner.addEventListener('click', function() {
                console.log('捕获 inner')
            }, true);

            outter.addEventListener('click', function() {
                console.log('冒泡 outter')
            });

            inner.addEventListener('click', function() {
                console.log('冒泡inner')
            });            
        </script>
    </body>
</html>